<template>
  <div class="page_recommendPersons">
    <van-sticky>
      <van-nav-bar title="推广用户" left-arrow @click-left="$router.push({path: '/mine'})">
        <template #right>
          <van-icon
            :name="!searchBoxShow ? 'search' : 'close'"
            size="20"
            @click="searchBoxShow = !searchBoxShow; toClearKeyWord(!!params.key)"
            style="margin-right: 20px; font-size: 20px;"
          />
        </template>
      </van-nav-bar>
      <van-search
        v-show='searchBoxShow'
        v-model="params.key"
        placeholder="按手机号，昵称或备注搜索"
        show-action
        shape="round"
        @search="handleSearch"
        @clear="toClearKeyWord"
      >
        <div slot="action" @click="handleSearch">搜索</div>
      </van-search>

    </van-sticky>



    <!-- <com-header :comHeaderObj="headerObj"></com-header> -->



    <van-divider :style="{color:'#020202', borderColor: '#DD4F42', padding: '10px 36px', margin: '0'}">
      我获得的推广激励（股份）
    </van-divider>

    <van-cell title="我已领取的股份总数"
              :value="(stock.takeNum || 0) + '股'"
              is-link label="点击查看详情"
              @click="toReceivedStockPage(stock.takeNum, 'had')"
    />
    <van-cell title="我未领取的股份总数"
              :value="(stock.unTakeNum || 0) + '股'"
              is-link label="点击领取"
              @click="toReceivedStockPage(stock.unTakeNum, 'no')"
    />

     <van-divider :style="{color:'#020202', borderColor: '#DD4F42', padding: '10px 36px', margin: '0'}">
      我推广的用户
    </van-divider>

    <div style="box-sizing: border-box; text-align: center; background-color: #ffffff">
      <com-filter-menu
        :rightOptionObj="rightOptionObj"
        :rightOption="rightOption"
        :rightValue="rightValue"
        @getFilterMenuValue="toGetFilterMenuValue"
      ></com-filter-menu>

      <!-- 推荐人员列表， 封装组件   -->
      <div class="recommend_list" v-if="recommendList.length">
        <!-- 将这某一项分封装为一个组件   -->
        <com-recommend-item
          v-for="(item) in recommendList"
          :item="item"
          :key="item.id"
          :routeName='$route.name'
        ></com-recommend-item>
      </div>

      <van-divider style="margin-top: 80px" v-if="!recommendList.length">暂无数据</van-divider>

      <!-- 分页  -->
      <div class="bottomPage">
        <van-pagination
          v-model="params.pageIndex"
          :total-items="total"
          :items-per-page="params.pageSize"
          force-ellipses
          @change="handleChange"
        />
      </div>


<!--      <vue-awesome-textarea />-->

    </div>

    <van-action-sheet
      v-model="showAction"
      :actions="actionsArr_L1"
      cancel-text="取消"
      close-on-click-action
      @select="handleSelectAction"
    />


  </div>
</template>

<script>
import comRecommendItem from '../../components/comRecommendItem'
import comHeader from '../../components/comHeader'
import comFilterMenu from '../../components/comFilterMenu'
import {Toast} from "vant";

import VueAwesomeTextarea from "components/vue-awesome-textarea";

const rightOptionObj = {
  all: '一级全部用户',
  personal_user: '一级个人用户',
  enterprise_user: '一级企业用户',

  level_one_no_person: '一级未推广个人用户',
  level_one_person: '一级已推广个人用户',
  level_one_no_enterprise: '一级未推广企业用户',
  level_one_enterprise: '一级已推广企业用户',
  level_one_no_getStock: '一级未领取股份',
  level_one_getStock: '一级已领取股份',
  level_two_no_getStock: '二级未领取股份',
  level_two_getStock: '二级已领取股份',
  level_one_no_job: '一级用户未发布招聘信息',
  level_one_job: '一级用户已发布招聘信息',
  level_two_no_job: '二级用户未发布招聘信息',
  level_two_job: '二级用户已发布招聘信息',
};

const rightOption = [
  {value: 'all',text: '一级全部用户',},
  {value: 'personal_user', text: '一级个人用户', },
  {value: 'enterprise_user', text: '一级企业用户',},
  {value: 'level_one_no_person',text: '一级未推广个人用户',},
  {value: 'level_one_person',text: '一级已推广个人用户',},
  {value: 'level_one_no_enterprise',text: '一级未推广企业用户',},
  {value: 'level_one_enterprise',text: '一级已推广企业用户',},
  {value: 'level_one_no_getStock',text: '一级未领取股份',},
  {value: 'level_one_getStock',text: '一级已领取股份',},
  {value: 'level_two_no_getStock',text: '二级未领取股份',},
  {value: 'level_two_getStock',text: '二级已领取股份',},
  {value: 'level_one_no_job', text: '一级用户未发布招聘信息',},
  {value: 'level_one_job', text: '一级用户已发布招聘信息',},
  {value: 'level_two_no_job', text: '二级用户未发布招聘信息',},
  {value: 'level_two_job', text: '二级用户已发布招聘信息',},
];

const rightOption_2 = [
  {text: `全部用户【${500}人】`, value: 'all'},
  {text: `个人用户【${200}人】`, value: 'personal_user'},
  {text: `企业用户【${300}人】`, value: 'enterprise_user'}
];

export default {
  name: 'recommendPersons',
  components: {
    comRecommendItem,
    comHeader,
    comFilterMenu,
    VueAwesomeTextarea,
  },
  data() {
    return {
      stock:{},
      showOverlay: false,
      searchBoxShow: false,
      keyWord: 'recommendPersons',
      rightValue: 'all',
      total: 0,
      rightOption,
      rightOptionObj,
      showAction: false,
      actionsArr_L1: [
        { name: '已领取的一级股份', color: '#23A7F2', },
        { name: '待领取的一级股份', color: '#ee0a24', },
      ],
      actionsArr_L2: [
        { name: '已领取的二级股份', color: '#3592C4', },
        { name: '待领取的二级股份', color: '#EF7674', },
      ],
      // 头部需要的数据
      headerObj: {
        title: '总代招费',
        money: '88888',
        leftBtnText: '提现',
        leftBtnPath: '/cash/reflect',
        middleBtnText: '代招费总记录',
        middleBtnPath: '/recommend_fee_record',
        rightBtnText: '',
        rightBtnPath: '',
        // 提现标识
        cashOutSign: 'recommendPersons'
      },
      recommendList: [],
      params: {
        state: '',
        key: '',
        pageIndex: 1,
        pageSize: 20
      },

    }
  },

  mounted() {
    this.getStockNum()
    let key = this.$route.query.phone
    this.params.key = key
    console.log(this.params)
    this._initPage(this.params)
  },

  // 匹配路由规则，进入该组件时被调用
  beforeRouteEnter(to, from, next) {
    if(from.name === 'mine'){
      // console.warn('进入------该组件时被调用', to, from);
      next(vm => {
        vm.$route.meta.keepAlive = true;
      });
    } else {
      // 一定要有next();
      next();
    };
  },

  // 注意: 此处的逻辑(匹配路由规则，离开该组件时被调用)
  beforeRouteLeave(to, from, next) {
    // console.log('离开------该组件时被调用', to);
    //console.log('离开------该组件时被调用', from);
    if (to.name === 'mine') {
      //  返回我的页面，则不再缓存页面
      this.$route.meta.keepAlive = false;
    };
    next();
  },

  activated() {
    this.showAction = false;
  },

  deactivated() {
    this.showAction = false;
  },

  methods: {
    //获得的推广激励股份数
    async getStockNum() {
      const res = await this.$api.others.getInvitatioStockNum();
      if (res.code === 200){
        this.stock = res?.data || 0
      };
    },

    _initPage(params) {
      this.$api.others.reqMyRecommendPersons(params).then(res => {
        if (res.code === 200) {
          this.recommendList = res.data.items
          this.total = res.data.count
        }
      })
    },

    toGetFilterMenuValue(val) {
      //过滤后返回第一页
      this.params.pageIndex = 1
      this.params.state = ''
      if (val == 'personal_user') {
        this.params.state = 1
        //个人用户
      } else if (val == 'enterprise_user') {
        //企业用户
        this.params.state = 2
      }
      this._initPage(this.params)
    },

    // 点击分页
    handleChange(value) {
      this.params.pageIndex = value
      this._initPage(this.params)
    },

    toReceivedStockPage(num, keyId){
      const pathName = keyId === 'had' ? 'receivedStock' : 'unReceivedStock';
      this.$router.push({
        name: pathName,
        query: {
          num,
          active:0,
        }
      });
    },


    handleSearch() {
      this.params.pageIndex = 1
      if(this.params.key.trim()){
        this._initPage(this.params)
      } else {
        Toast('请先输入！');
      }
    },

    toClearKeyWord(isQuery = true){
      if(!isQuery){
        return
      };
      this.params.key = '';
      this.params.pageIndex = 1;
      this.params.state = '';

      this.$nextTick(() => {
        this._initPage(this.params);
      })
    },


    handleSelectAction(action, index){
      console.log(action, index);

      // 一级
      const pathName = index === 0 ? 'receivedStock' : 'unReceivedStock';
      this.$router.push({
        name: pathName,
        query: { num: 666, }
      });

    },

  }
}
</script>

<style lang="scss" scoped>
.page_recommendPersons {
  width: 100%;
  .over_layer {
    margin-top: 46px;
    height: 100%;
    .layer {
      width: 36%;
      font-size: 14px;
      position: absolute;
      right: 0;
      z-index: 2;
    }
  }
  .head_title {
    height: 100px;
    width: 150px;
    border-radius: 50%;
    color: #fff;
    background-color: #0099ff;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
  }
  .recommend_list {
    padding-bottom: 50px;
    box-sizing: border-box;
    background-color: #ffffff;
    font-size: 12px;
  }

  .bottomPage {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
</style>
